{% extends "trees/base.html" %}
{% block title %}Planting Session - JM3{% endblock %}
{% block extra_head %}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<style>#pickmap { height: 200px; border-radius: 8px; }</style>
{% endblock %}
{% block content %}
<h2 class="mb-1">Bulk Planting Session</h2>
<p class="text-muted">Register many trees at once for a large planting. Each becomes <strong>Pending</strong> &mdash; verify individuals later.</p>

<form method="post" class="bg-white p-3 p-md-4 rounded shadow-sm">
  {% csrf_token %}
  <div class="row">
    <div class="col-8 mb-3"><label class="form-label fw-bold">Species</label>{{ form.species }}</div>
    <div class="col-4 mb-3"><label class="form-label fw-bold">Quantity</label>{{ form.quantity }}</div>
  </div>

  <div class="mb-3">
    <label class="form-label fw-bold">Location (GPS)</label>
    <button type="button" id="gpsBtn" class="btn btn-outline-success btn-sm mb-2 w-100">📍 Use my location</button>
    <div id="pickmap"></div>
    <div class="form-text" id="coords">Tap the map or use GPS.</div>
    {{ form.latitude }}{{ form.longitude }}
  </div>

  <div class="mb-3">
    <label class="form-label fw-bold">Session photo (camera only)</label>
    {% include "trees/_camera.html" with required=True %}
  </div>

  <div class="row">
    <div class="col-6 mb-3"><label class="form-label">County</label>{{ form.county }}</div>
    <div class="col-6 mb-3"><label class="form-label">Planted date</label>{{ form.planted_date }}</div>
  </div>

  {{ form.non_field_errors }}
  <button type="submit" class="btn btn-jm3 btn-lg w-100">Register Session</button>
</form>
{% endblock %}
{% block extra_js %}
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
  const latInput = document.getElementById('id_latitude');
  const lngInput = document.getElementById('id_longitude');
  const coords = document.getElementById('coords');
  const map = L.map('pickmap').setView([-1.286389, 36.817223], 7);
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution:'&copy; OpenStreetMap'}).addTo(map);
  let marker = null;
  function setPoint(lat, lng, zoom) {
    latInput.value = lat.toFixed(6); lngInput.value = lng.toFixed(6);
    coords.textContent = '📍 ' + lat.toFixed(6) + ', ' + lng.toFixed(6);
    if (marker) marker.setLatLng([lat, lng]); else marker = L.marker([lat, lng]).addTo(map);
    if (zoom) map.setView([lat, lng], zoom);
  }
  map.on('click', e => setPoint(e.latlng.lat, e.latlng.lng));
  document.getElementById('gpsBtn').addEventListener('click', () => {
    if (!navigator.geolocation) { alert('GPS not available.'); return; }
    coords.textContent = 'Locating…';
    navigator.geolocation.getCurrentPosition(
      pos => setPoint(pos.coords.latitude, pos.coords.longitude, 16),
      () => { coords.textContent = 'Could not get GPS. Tap the map instead.'; });
  });
</script>
{% endblock %}